let a = 5,
    b = 10;

console.log("Before swapping: a = " + a + ", b = " + b, ", a + b = " + (a + b));

/* ========================= 数据类型  ========================== */
console.log("======= 数据类型  =======");
let c;
console.log("type of c is: " + typeof c); // undefined
console.log("type of 3 is: " + typeof 3); //number
console.log("type of 3.14 is: " + typeof 3.14); //number
console.log("type of 'A' is: " + typeof "A"); //string
console.log("type of 'Hello' is: " + typeof "Hello"); //string
console.log("type of true is: " + typeof true); //boolean
console.log("type of false is: " + typeof false); //boolean
console.log("type of null is: " + typeof null); //object

/* ========================= 格式化输出字符串 ========================== */
console.log("======= 格式化输出字符串 =======");
let year = 2025,
    month = 3,
    day = 5;
let string = `今天是${year}年，${month}月，${day}日`;
console.log(string);

/* ========================= 函数 ========================== */
console.log("======= 函数 =======");
// 普通函数声明
function add(a, b) {
    return a + b;
}
console.log("the result of function add(3,5) is: " + add(3, 5));

// 匿名函数声明1
let add2 = function (a, b) {
    return a + b;
};
console.log("the result of function add2(3,5) is: " + add2(3, 5));

// 匿名函数声明2（更常用）
let add3 = (a, b) => {
    return a + b;
};
console.log("the result of function add3(3,5) is: " + add3(3, 5));

/* ========================= 对象 ========================== */
console.log("======= 对象 =======");
let person = {
    name: "John",
    age: 25,
    sayHello: function () {
        console.log("Hello, my name is " + this.name);
    },
};
person.sayHello();

/* ========================= JSON ========================== */
console.log("======= JSON =======");
// 将对象转换为JSON字符串
let personJSON = JSON.stringify(person);
console.log(personJSON);

// 将JSON字符串转换为对象
let personObject = JSON.parse(personJSON);
console.log(personObject);

/* ========================= DOM ========================== */
console.log("======= DOM =======");
let hs = document.querySelectorAll("h1");
console.log("querySelectorAll('h1') returns: ", typeof hs);
console.log("hs.length returns: ", hs.length);
console.log("hs[0].innerHTML returns: ", hs[0].innerHTML); // innerHTML是h1的内容

/* ========================= 事件 ========================== */
console.log("======= 事件 =======");
let btn1 = document.querySelector("#btn1");
btn1.addEventListener("click", () => {
    alert("Button 1 clicked");
});
